<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	<title>jQuery demo</title>
	
	<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
	
	<style>
    	a.test { font-weight: bold; }
    	
    	.horizontal {
    		float:		left;
    		list-style: none;
    		margin:		10px;
    	}
 	</style>
	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	
	
	
</head>
<body>
	<a href="http://jquery.com/">jQuery</a> <br />
	<a href="#" id="tohide">link</a> <br />
	
	<ul>
		<li><a href="#" class="toggleNumbers">numbers</a>
			<ul class="hideNumbers">
				<li>1
					<ul>
						<li>um</li>
					</ul>
				<li>2
				<li>3
			</ul>
		</li>
		<li>leters
			<ul class="hideLetters">
				<li>a
				<li>b
				<li>c
			</ul>
		<li>words
			<ul>
				<li>ante
				<li>bilhar
				<li>cartas
			</ul>
	</ul>
	
	<ul id="selected">
		<li> first li
			<ul>
				<li>item 1</li>			
				<li>item 2</li>			
				<li>item 3</li>			
				<li>item 4</li>			
			</ul>
		</li>
		<li>
			<ul>
				<li>item 1</li>			
				<li>item 2</li>			
				<li>item 3</li>			
				<li>item 4</li>
			</ul>
		</li>
	</ul>
	
	<a href="" class="click">link</a>
	
	<script>
	
	//console.log('test');
	

	
	
	
	
		// wait until the document is ready to be manipulated ... this is the entry point
		// do stuff when DOM is ready
		$(document).ready(function() {
			
			$('.click').dblclick(function() {
				alert("helloworld");
			});
			// click event in all link's
			/*$("a").click(
				function(event) {					
					event.preventDefault();					
					alert("As you can see, the link no longer took you to jquery.com");					
				});*/ 
				$('#date').datepicker();

			// mouse over event
			$('#tohide').mouseover(
				function(event) {
					// alert("mouse over detected");
					$(this).hide("slow");
					//$('#selected > li').addClass('horizontal');
				});
			
			 $("#list li:last").hover(
				function() {
					$(this).addClass("green");
				});
			 
			 
			//$(".hideNumbers").hide();
			$(".toggleNumbers").click(
				function() {
					$(".hideNumbers").fadeToggle("slow");
				});
				
			
		});
		
		
	</script>
	
	
	
	
	
	
</body>
</html>